<template>
  <div>
    <PageTitleSearch
      :title="title"
      :hotelList="hotelList"
      :currentHotel="currentHotel"
      v-model:lastMonth="lastMonth"
      :currentAcc="currentAcc"
      @hotel-change="handleSelectChange"
      @date-change="handleDateSelect"
      @acc-change="handleAccSelect"
    />
    <div class="main-content">
      <a-row :gutter="12" class="custom-row">
        <a-col class="fixed-col">
          <div class="title-name">
            {{ currentAcc === 'month' ? '当月：' : '年累计：' }}
          </div>
        </a-col>
        <a-col :span="8">
          <div class="title-name">酒店实际</div>
        </a-col>
        <a-col :span="8">
          <div class="title-name">竞争圈数据</div>
        </a-col>
        <a-col :span="8">
          <div class="title-name">指数表现</div>
        </a-col>
      </a-row>
      <!-- 出租率 -->
      <a-row :gutter="12" class="margin-top-layout custom-row">
        <a-col class="fixed-col">
          <div class="title-name title-name-left"> 出租率 </div>
        </a-col>
        <a-col :span="8">
          <FlexCard class="circle-card flex-height" :loading="loading" :dataList="rentRateData">
            <CirclePointImg v-if="rentRateData.length > 0" :dataList="rentRateData" />
          </FlexCard>
        </a-col>
        <a-col :span="8">
          <FlexCard class="circle-card flex-height" :loading="competLoading" :dataList="competData">
            <CirclePointImg v-if="competData.length > 0" :dataList="getCompetCircleData('01')" />
          </FlexCard>
        </a-col>
        <a-col :span="8">
          <FlexCard class="circle-card flex-height" :loading="competLoading" :dataList="competData">
            <CirclePointImg v-if="competData.length > 0" :dataList="getIndexRentData()" />
          </FlexCard>
        </a-col>
      </a-row>
      <!-- 平均房价 -->
      <a-row :gutter="12" class="margin-top-layout custom-row">
        <a-col class="fixed-col">
          <div class="title-name title-name-left"> 平均房价 </div>
        </a-col>
        <a-col :span="8">
          <FlexCard class="circle-card flex-height" :loading="loading" :dataList="priceData">
            <CirclePointImg v-if="priceData.length > 0" :dataList="priceData" />
          </FlexCard>
        </a-col>
        <a-col :span="8">
          <FlexCard class="circle-card flex-height" :loading="competLoading" :dataList="competData">
            <CirclePointImg v-if="competData.length > 0" :dataList="getCompetCircleData('02')" />
          </FlexCard>
        </a-col>
        <a-col :span="8">
          <FlexCard class="circle-card flex-height" :loading="competLoading" :dataList="competData">
            <CirclePointImg v-if="competData.length > 0" :dataList="getIndexPriceData()" />
          </FlexCard>
        </a-col>
      </a-row>
      <!-- 每房收益 -->
      <a-row :gutter="12" class="margin-top-layout custom-row">
        <a-col class="fixed-col">
          <div class="title-name title-name-left"> 每房收益 </div>
        </a-col>
        <a-col :span="8">
          <FlexCard class="circle-card flex-height" :loading="loading" :dataList="perData">
            <CirclePointImg v-if="perData.length > 0" :dataList="perData" />
          </FlexCard>
        </a-col>
        <a-col :span="8">
          <FlexCard class="circle-card flex-height" :loading="competLoading" :dataList="competData">
            <CirclePointImg v-if="competData.length > 0" :dataList="getCompetCircleData('03')" />
          </FlexCard>
        </a-col>
        <a-col :span="8">
          <FlexCard class="circle-card flex-height" :loading="competLoading" :dataList="competData">
            <CirclePointImg v-if="competData.length > 0" :dataList="getIndexPerData()" />
          </FlexCard>
        </a-col>
      </a-row>
      <!-- 释义 -->
      <a-row :gutter="12" class="margin-top-layout custom-row">
        <a-col class="fixed-col">
          <div class="title-name title-name-left"> 释义： </div>
        </a-col>
        <a-col :span="8">
          <FlexCard class="circle-card flex-height" :loading="loading" title="图列：">
            <CircleIndicator :dataList="rentRateData" />
          </FlexCard>
        </a-col>
        <a-col :span="8">
          <ReportRemarkCard
            title="竞争酒店包括："
            class="flex-height"
            :loading="loading"
            :reportCode="reportCompetCode"
            :reportName="reportCompetName"
            remarkHeight="200px"
          />
        </a-col>
        <a-col :span="8">
          <FlexCard title="释义：" class="circle-card flex-height" :loading="competLoading">
            <p>{{ remark }}</p>
          </FlexCard>
        </a-col>
      </a-row>
      <div class="remark-card">
        <ReportRemarkCard class="flex-height" :loading="loading" :reportCode="reportCode" :reportName="reportName" remarkHeight="200px" />
      </div>
      <div class="remark-card">
        <ReportRemarkCard
          class="flex-height"
          :loading="loading"
          v-if="reportCmonthCode"
          :reportCode="reportCmonthCode"
          :reportName="reportCmonthName"
          remarkHeight="200px"
        />
      </div>
      <div class="remark-card">
        <ReportRemarkCard
          class="flex-height"
          :loading="loading"
          v-if="reportCmonthCode"
          :reportCode="reportIndexCode"
          :reportName="reportIndexName"
          remarkHeight="200px"
        />
      </div>
    </div>
  </div>
</template>
<script>
  import dayjs from 'dayjs';
  import { defHttp } from '/@/utils/http/axios';
  import * as MathUtil from '/@/utils/MathUtil';
  import * as DateUtil from '/@/utils/dateUtil';
  import * as Constant from '/@/utils/Constant';
  import PageTitleSearch from '@/views/applications/ui/PageTitleSearch.vue';
  import FlexCard from '/@/views/applications/ui/FlexCard.vue';
  import ReportRemarkCard from '/@/views/applications/ui/ReportRemarkCard.vue';
  import CirclePointImg from '/@/views/applications/ui/CirclePointImg.vue';
  import CircleIndicator from '/@/views/applications/ui/CircleIndicator.vue';

  const COLOR_RED = '#F53F3F';
  const COLOR_WHITE = '#FFFFFF';
  const COLOR_BLUE = '#212A7C';
  const COLOR_PURPLE = '#665C99';
  const COLOR_GRAY = '#D3CEE2';
  const REPORT_NAME = '酒店月度客房竞争圈分析（项目）';
  const REPORT_CODE = 'hotel-month-single-compet';
  const INCOME_APIS = {
    month: 'getHotelMonthCompetRoomKey',
    year: 'getHotelMonthAccCompetRoomKey',
  };

  export default {
    name: REPORT_NAME,

    components: {
      PageTitleSearch,
      FlexCard,
      ReportRemarkCard,
      CirclePointImg,
      CircleIndicator,
    },

    data() {
      return {
        remark: '指数定义：\nMPI：实际出租率/竞争圈出租率\nARI：实际平均房价/竞争圈平均房价\nRGI：实际每房收益/竞争圈每房收益',
        title: '客房部分-竞争圈分析',
        reportCode: '',
        reportName: '',
        reportCompetCode: '',
        reportCompetName: '',
        reportCmonthCode: '',
        reportCmonthName: '',
        reportIndexCode: '',
        reportIndexName: '',
        loading: false,
        competLoading: false,
        lastMonth: dayjs().subtract(1, 'month').format('YYYYMM'),
        hotelList: [],
        accList: [
          { label: '当月', value: 'month' },
          { label: '当年', value: 'year' },
        ],
        currentHotel: {},
        currentAcc: 'month',
        priceData: [],
        perData: [],
        rentRateData: [],
        competData: [],
        incomeData: [],
      };
    },

    created() {
      defHttp.get({ url: '/data/hotel/list' }, { isTransformResponse: false }).then((res) => {
        if (res.code === 200 && res.result.length > 0) {
          const resData = res.result || [];
          this.hotelList = resData.map((s) => {
            return { label: s.name, value: s.code };
          });
          const currentHotelCode = this.$route.query.hotelCode || localStorage.getItem(Constant.STORAGE_HOTEL_NAME);
          if (currentHotelCode && resData.filter((d) => d.code === currentHotelCode).length > 0) {
            this.currentHotel = resData.filter((d) => d.code === currentHotelCode)[0];
          } else {
            this.currentHotel = {
              code: resData[0].code,
              name: resData[0].name,
            };
          }
          this.hotelSel = this.currentHotel;
          const accName = this.accList.filter((a) => a.value === this.currentAcc)[0].label;
          this.reportCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}-income`;
          this.reportName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}-income`;
          this.reportCmonthCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}-compet`;
          this.reportCmonthName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}-compet`;
          this.reportIndexCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}-index`;
          this.reportIndexName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}-index`;
          this.reportCompetCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}`;
          this.reportCompetName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}`;
          console.log('🚀 ~ defHttp.get ~ this.reportCompetName:', this.reportCompetName);
          this.fetchData();
          this.fetchCompetData();
        }
      });
    },

    methods: {
      fetchData() {
        this.loading = true;
        defHttp
          .post({
            url: '/data/query',
            data: {
              labelCode: INCOME_APIS[this.currentAcc],
              sqlParams: [
                {
                  key: 'code',
                  value: this.currentHotel.code,
                },
                {
                  key: 'month',
                  value: this.lastMonth,
                },
              ],
              pageIndex: 1,
              pageSize: 100,
            },
          })
          .then((res) => {
            if (res.datas.success && res.datas.data.length > 0) {
              const incomeData = res.datas.data[0];
              this.incomeData = incomeData;
              const croom = {
                actual: incomeData.croom,
                lActual: incomeData.lCroom,
              };
              const sroom = {
                actual: incomeData.sroom,
                lActual: incomeData.lSroom,
              };
              const roomIncome = {
                actual: incomeData.income,
                lActual: incomeData.lIncome,
              };
              const actualRentRate = this.safeDivide(sroom.actual, croom.actual);
              const lactualRentRate = this.safeDivide(sroom.lActual, croom.lActual);
              const actualPrice = this.safeDivide(roomIncome.actual, sroom.actual);
              const lactualPrice = this.safeDivide(roomIncome.lActual, sroom.lActual);
              const actualPer = this.safeDivide(roomIncome.actual, croom.actual);
              const lactualPer = this.safeDivide(roomIncome.lActual, croom.lActual);
              this.rentRateData = this.wrapData(actualRentRate, lactualRentRate, 'percent');
              this.priceData = this.wrapData(actualPrice, lactualPrice, 'yuan');
              this.perData = this.wrapData(actualPer, lactualPer, 'yuan');
            } else {
              this.rentRateData = [];
              this.priceData = [];
              this.perData = [];
              this.incomeData = {};
            }
            localStorage.setItem(Constant.STORAGE_HOTEL_NAME, this.currentHotel.code);
            this.loading = false;
          });
      },
      fetchCompetData() {
        this.competLoading = true;
        defHttp
          .post({
            url: 'data/query',
            data: {
              labelCode: 'getHotelMonthCompetion',
              sqlParams: [
                {
                  key: 'code',
                  value: this.currentHotel.code,
                },
                {
                  key: 'month',
                  value: this.lastMonth,
                },
              ],
              pageIndex: 1,
              pageSize: 100,
            },
          })
          .then((res) => {
            if (res.success && res.data.datas.data.length > 0) {
              this.competData = res.data.datas.data;
            } else {
              this.competData = [];
            }
            this.competLoading = false;
          });
      },
      getCompetCircleData(code) {
        const competData = this.competData.filter((c) => c.subjectCode === code)[0];
        const valueName = this.currentAcc === 'month' ? 'mvalue' : 'accmvalue';
        const lvalueName = this.currentAcc === 'month' ? 'lMvalue' : 'lAccmvalue';
        const actual = competData[valueName];
        const lactual = competData[lvalueName];
        return [
          {
            value: code === '01' ? this.percent2DFormatter(actual, 0) : `¥ ${this.dot2Formatter(actual, 0)}`,
          },
          {
            value: `${actual > lactual ? '+' : ''}${this.diffPercent2Formatter(actual, lactual, 0)}`,
            textColor: actual >= lactual ? COLOR_PURPLE : COLOR_WHITE,
            color: actual >= lactual ? COLOR_GRAY : COLOR_RED,
          },
        ];
      },
      getIndexRentData() {
        const competData = this.competData.filter((c) => c.subjectCode === '01')[0];
        const valueName = this.currentAcc === 'month' ? 'mvalue' : 'accmvalue';
        const lvalueName = this.currentAcc === 'month' ? 'lMvalue' : 'lAccmvalue';
        const incomeData = this.incomeData;
        const croom = {
          actual: incomeData.croom,
          lActual: incomeData.lCroom,
        };
        const sroom = {
          actual: incomeData.sroom,
          lActual: incomeData.lSroom,
        };
        const actual = this.safeDivide(this.safeDivide(sroom.actual, croom.actual), competData[valueName]);
        const lactual = this.safeDivide(this.safeDivide(sroom.lActual, croom.lActual), competData[lvalueName]);
        return this.wrapData(actual * 100, lactual * 100, 'dot', COLOR_BLUE, 'MPI');
      },
      getIndexPriceData() {
        const competData = this.competData.filter((c) => c.subjectCode === '02')[0];
        const valueName = this.currentAcc === 'month' ? 'mvalue' : 'accmvalue';
        const lvalueName = this.currentAcc === 'month' ? 'lMvalue' : 'lAccmvalue';
        const incomeData = this.incomeData;
        const roomIncome = {
          actual: incomeData.income,
          lActual: incomeData.lIncome,
        };
        const sroom = {
          actual: incomeData.sroom,
          lActual: incomeData.lSroom,
        };
        const actual = this.safeDivide(this.safeDivide(roomIncome.actual, sroom.actual), competData[valueName]);
        const lactual = this.dot2Formatter(this.safeDivide(this.safeDivide(roomIncome.lActual, sroom.lActual), competData[lvalueName]));

        return this.wrapData(actual * 100, lactual * 100, 'dot', COLOR_BLUE, 'ARI');
      },
      getIndexPerData() {
        const competData = this.competData.filter((c) => c.subjectCode === '03')[0];
        const valueName = this.currentAcc === 'month' ? 'mvalue' : 'accmvalue';
        const lvalueName = this.currentAcc === 'month' ? 'lMvalue' : 'lAccmvalue';
        const incomeData = this.incomeData;
        const roomIncome = {
          actual: incomeData.income,
          lActual: incomeData.lIncome,
        };
        const croom = {
          actual: incomeData.croom,
          lActual: incomeData.lCroom,
        };
        const actual = this.safeDivide(this.safeDivide(roomIncome.actual, croom.actual), competData[valueName]);
        const lactual = this.safeDivide(this.safeDivide(roomIncome.lActual, croom.lActual), competData[lvalueName]);
        return this.wrapData(actual * 100, lactual * 100, 'dot', COLOR_BLUE, 'RGI');
      },
      wrapData(actual, lactual, formmatter, color, remark) {
        const fs = {
          yuan: (a) => `¥ ${this.dot2Formatter(a, 0)}`,
          percent: (a) => this.percent2DFormatter(a, 0),
          dot: (a) => this.dot2Formatter(a, 0),
        };
        return [
          {
            value: fs[formmatter](actual),
            color,
            remark,
          },
          {
            value: `${actual > lactual ? '+' : ''}${this.diffPercent2Formatter(actual, lactual, 0)}`,
            textColor: actual > lactual ? COLOR_PURPLE : COLOR_WHITE,
            color: actual > lactual ? COLOR_GRAY : COLOR_RED,
          },
        ];
      },
      getCustomOption() {
        const line1BeginX = 50;
        const line1Endx = line1BeginX + 30;
        const line1BeginY = 35;
        const line2BeginX = 30;
        const line2Endx = line2BeginX + 50;
        const line2BeginY = 95;
        return {
          responsive: true,
          graphic: [
            {
              type: 'group',
              left: 10,
              top: 30,
              children: [
                {
                  top: 30,
                  type: 'circle',
                  shape: {
                    r: 50,
                  },
                  style: {
                    fill: '#665C99',
                  },
                },
                {
                  type: 'circle',
                  left: 10,
                  top: 10,
                  shape: {
                    r: 25,
                  },
                  style: {
                    fill: 'lightgray',
                  },
                },
                {
                  type: 'rect',
                  shape: {
                    x: line1BeginX,
                    y: line1BeginY - 1,
                    width: 2,
                    height: 2,
                  },
                },
                {
                  type: 'line',
                  shape: {
                    x1: line1BeginX,
                    y1: line1BeginY,
                    x2: line1Endx,
                    y2: line1BeginY,
                  },
                  style: {
                    fill: null,
                    stroke: '#000',
                    lineWidth: 0.5,
                  },
                },
                {
                  type: 'polygon',
                  shape: {
                    points: [
                      [line1Endx, line1BeginY - 2],
                      [line1Endx + 2, line1BeginY],
                      [line1Endx, line1BeginY + 2],
                    ],
                  },
                },
                {
                  left: line1Endx + 10,
                  top: line1BeginY - 6,
                  type: 'text',
                  style: {
                    text: '同比差异率',
                  },
                },
                {
                  type: 'rect',
                  shape: {
                    x: line2BeginX,
                    y: line2BeginY - 1,
                    width: 2,
                    height: 2,
                  },
                },
                {
                  type: 'line',
                  shape: {
                    x1: line2BeginX,
                    y1: line2BeginY,
                    x2: line2Endx,
                    y2: line2BeginY,
                  },
                  style: {
                    fill: null,
                    stroke: '#000',
                    lineWidth: 0.5,
                  },
                },
                {
                  type: 'polygon',
                  shape: {
                    points: [
                      [line2Endx, line2BeginY - 2],
                      [line2Endx + 2, line2BeginY],
                      [line2Endx, line2BeginY + 2],
                    ],
                  },
                },
                {
                  left: line2Endx + 10,
                  top: line2BeginY - 6,
                  type: 'text',
                  style: {
                    text: '当年数据',
                  },
                },
              ],
            },
          ],
        };
      },
      getTrianglePoint(point, interval = 5, rise = true) {
        return [
          [point[0], rise ? point[1] - interval : point[1] + interval],
          [point[0] - interval, rise ? point[1] + interval : point[1] - interval],
          [point[0] + interval, rise ? point[1] + interval : point[1] - interval],
        ];
      },
      filterOption(input, option) {
        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
      },
      handleSelectChange(value) {
        this.currentHotel = {
          code: value,
          name: this.hotelList.filter((h) => h.value === value)[0].label,
        };
        const accName = this.accList.filter((a) => a.value === this.currentAcc)[0].label;
        this.reportCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}-income`;
        this.reportName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}-income`;
        this.reportCmonthCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}-compet`;
        this.reportCmonthName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}-compet`;
        this.reportIndexCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}-index`;
        this.reportIndexName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}-index`;
        this.reportCompetCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}`;
        this.reportCompetName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}`;
        this.fetchData();
        this.fetchCompetData();
      },
      handleAccSelect(value) {
        const name = this.accList.filter((h) => h.value === value)[0].label;
        this.currentAcc = value;
        this.reportCode = `${REPORT_CODE}-${value}-${this.currentHotel.code}-${this.lastMonth}-income`;
        this.reportName = `${REPORT_NAME}-${name}-${this.currentHotel.name}-${this.lastMonth}-income`;
        this.reportCmonthCode = `${REPORT_CODE}-${value}-${this.currentHotel.code}-${this.lastMonth}-compet`;
        this.reportCmonthName = `${REPORT_NAME}-${name}-${this.currentHotel.name}-${this.lastMonth}-compet`;
        this.reportIndexCode = `${REPORT_CODE}-${value}-${this.currentHotel.code}-${this.lastMonth}-index`;
        this.reportIndexName = `${REPORT_NAME}-${name}-${this.currentHotel.name}-${this.lastMonth}-index`;
        this.reportCompetCode = `${REPORT_CODE}-${value}-${this.currentHotel.code}`;
        this.reportCompetName = `${REPORT_NAME}-${name}-${this.currentHotel.name}`;
        this.fetchData();
      },
      handleDataChange(val) {
        this.dateSel = val;
      },
      showFilterPopup() {
        this.filterPopup = true;
        this.dateSel = this.currentDate;
      },
      cancelFilter() {
        this.filterPopup = false;
      },
      confirmFilter() {
        this.currentDate = this.dateSel;
        this.fetchData();
        this.filterPopup = false;
      },
      isMonthDisabled(current) {
        const lastMonth = dayjs().subtract(1, 'month');
        return current.isAfter(lastMonth);
      },
      handleDateSelect() {
        console.log('🚀 ~ handleDateSelect ~ handleDateSelect:');
        const accName = this.accList.filter((h) => h.value === this.currentAcc)[0].label;
        this.reportCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}-income`;
        this.reportName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}-income`;
        this.reportCmonthCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}-compet`;
        this.reportCmonthName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}-compet`;
        this.reportIndexCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}-${this.lastMonth}-index`;
        this.reportIndexName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}-${this.lastMonth}-index`;
        this.reportCompetCode = `${REPORT_CODE}-${this.currentAcc}-${this.currentHotel.code}`;
        this.reportCompetName = `${REPORT_NAME}-${accName}-${this.currentHotel.name}`;
        this.fetchData();
        this.fetchCompetData();
      },
      currencyWFormatter(value, dot = 2, unit = '万') {
        return MathUtil.currencyWFormatter(value, dot, unit);
      },
      currencyWNFormatter(value, dot = 0) {
        return MathUtil.currencyWNFormatter(value, dot);
      },
      currencyWNDFormatter(value, dot = 0) {
        return MathUtil.currencyWNDFormatter(value, dot);
      },
      percent2DFormatter(value, dot = 2) {
        return MathUtil.percent2DFormatter(value, dot);
      },
      diffPercent2Formatter(thisData, lastData, dot = 2) {
        return MathUtil.diffPercent2Formatter(thisData, lastData, dot);
      },
      dot2Formatter(value, dot = 2) {
        return MathUtil.dot2Formatter(value, dot);
      },
      dateRangeFormatter(dataRange) {
        return DateUtil.dateRangeFormatter(dataRange);
      },
      dateFormatter(data) {
        return DateUtil.dateFormatter(data);
      },
      monthFormatter(data) {
        return DateUtil.monthFormatter(data);
      },
      safeDivide(numerator, denominator) {
        return MathUtil.safeDivide(numerator, denominator);
      },
    },
  };
</script>

<style lang="less" scoped>
  .main-frame-header {
    display: flex;
    top: 0;
    width: 100%;
    height: 63px;
    background-color: #112c4d;
    box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.3);
    z-index: 1000;
    align-items: center;
    justify-content: center;
  }

  .main-frame-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
  }

  .main-frame-header-container {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: inherit;
  }

  .main-frame-header-start {
    flex: 1 1 auto;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
  }

  .main-frame-header-center {
    display: flex;
    flex-direction: column;
    text-align: center;
  }

  .main-frame-remark {
    color: #ffffff;
    font-size: 12px;
    margin-top: 3px;
  }

  .main-frame-header-end {
    flex: 1 1 auto;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-end;
  }

  .main-frame-header-item {
    flex: 0 0 auto;
    margin: 0 8px 0 8px;
  }

  .main-content {
    padding: 12px 0;

    &-title {
      &-custom {
        color: #00b578;
      }
    }
  }

  .card-double {
    display: flex;
    margin: 12px 0 12px 0;
    justify-content: space-between;

    &-item {
      flex-basis: 48%;
    }
  }

  .interval-area {
    margin-bottom: 12px;
  }

  .select-title-space {
    width: 200px;
    margin-right: 20px;
  }

  ::v-deep .select-title .van-cell {
    color: hsl(217, 16%, 60%);
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: unset;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    background-color: #112c4d;
  }

  .popup-right {
    width: auto;

    &-content {
      height: 800px;
      width: 318px;

      &-oprate {
        display: flex;
        padding: 16px;
        justify-content: center;

        &-item {
          width: 100%;
          margin-right: 10px;
        }

        &-item:last-child {
          margin-right: 0;
        }
      }
    }
  }

  @media @desktop {
    .row-content {
      display: flex;
    }

    .main-frame-desktop-header {
      padding: 1rem;
      background: #fff;
      overflow: hidden;
    }

    .echarts {
      width: 100%;
      height: 200px;
    }

    .title-name {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 36px;
      background: #ffffff;
      -webkit-box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
      box-shadow: 0px 5px 5px 0px rgba(25, 15, 15, 0.07);
      border-radius: 0.4rem;
      margin: 10px 0;
      font-size: 16px;
      font-weight: 600;
    }
    .title-name-left {
      height: 100% !important;
      margin: 0 !important;
    }
    .flex-height {
      white-space: pre-line;
      height: 268px;
    }
    .circle-card .echarts {
      width: 100%;
      height: 236px;
    }
  }
  .margin-top-layout {
    margin-top: 12px;
  }
  .remark-card {
    margin-top: 12px;
  }
  .custom-row {
    display: flex;
  }

  .fixed-col {
    flex: 0 0 100px; /* 固定宽度 100px */
    max-width: 100px; /* 兼容性 */
  }

  /* 其他列自动填充剩余空间 */
  .custom-row > .ant-col-8 {
    flex: 1;
    min-width: 0; /* 防止内容溢出 */
  }
</style>
